<template>

    <div class="uploads">
        <el-button v-if="!filename" @click="openHandler()" type="primary">上传</el-button>
        <el-button v-if="!!filename" @click="openHandler()" type="primary">重新上传</el-button>
        <el-button v-if="!!filename" @click="openHandler()" type="text">{{filename}}</el-button>

        <my-dialog v-model="dialogVisible" width="680px" :title="data.label_name">
            <div class="upload-body">
                <div class="upload-top">
                    <div class="top-text">
                        <p>{{data.label_name}} 采集上传提示：</p>
                        <p>1.证件图片正向、文字清晰</p>
                        <p>2.证件图片小于10M</p>
                        <p>3.图片格式为jpg、jpeg</p>
                        <p v-if="data.label_name === '营业执照'" class="red-p">4.上传原件（或加盖公章的复印件）扫描件或照片</p>
                    </div>

                    <div class="top-upload">
                        <my-upload :file-guid="model" single class="my-upload" @success="onSuccess"></my-upload>
                    </div>
                </div>

                <div class="img-box" v-if="data.examplefiles[0]">
                    <img :src="data.examplefiles[0].filesavepath ? data.examplefiles[0].filesavepath : ''" alt="">
                </div>

                <div class="sub-bot">
                    <el-button type="primary" class="sub-btn" @click="dialogClose">
                        提交
                    </el-button>
                </div>

            </div>

        </my-dialog>
    </div>
</template>

<script>
export default {
    props: {
        value: {
            type: String,
            default: ''
        },
        label_value: {
            type: String,
            default: '',
        },
        data: {
            type: Object,
            default: () => {
                {}
            },
        },
    },
    data() {
        return {
            dialogVisible: false,
            filename:'',
        };
    },
    computed: {
        model: {
            get: function () {
                return this.value;
            },
            set: function (val) {
                this.$emit('input', val);
            }
        },
    },

    watch: {

    },
    methods: {
        // 打开弹窗
        openHandler(data) {
            if (!this.data) {
                return;
            }
            this.dialogVisible = true;
        },

        // 关闭弹窗
        dialogClose() {
            this.dialogVisible = false;
        },

        onSuccess(val){
            this.filename = val.tdata[0].filename;
            // this.getFileList();
        },

        getFileList: function () {
            if(!this.data.label_value){return}
            console.log(this.data.label_value);
            this.$ajax({
                url: `${this.$store.state.api.sfile}/operate/getlist.json`,
                data: {
                    fileguid: this.data.label_value,
                },
                callback: data => {
                    if(!data) {return}

                    this.filename = data[0].filename;
                },
                complete: () => {},
            });
        },
    },
    mounted(){
        this.getFileList();
    },
};
</script>


<style lang="scss" scoped>
@import '@css/var.scss';

::v-deep .my-upload .single__file--name{
    width: 100px;
    a{
        width: 100px;
    }
}

.upload-top {
    display: flex;
    justify-content: space-between;
    .top-text {
        width: 300px;
        margin: 0;
        .red-p{
            color: red;
        }
    }
    .top-upload {
        width: 300px;
        margin: 0;
    }
}
.img-box{
    text-align: center;
    margin: 20px 0;
    img{
        max-width: 600px;
    }
}
.sub-bot {
    text-align: center;
    padding-top: 20px;
}
.sub-btn {
    margin: 0 auto;
}

// .uploads {
    .upload-body {
        margin-top: -30px;

        .row {
            text-align: center;
        }
    }
// }
</style>